<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <p>地址管理</p>
        </header>
        <!-- 地址列表部分 -->
        <ul class="addresslist">
            <li v-for="item in deliveryAddressArr">
                <div class="addresslist-left" >
                    <h3 v-if="item.contactSex===1">{{ item.contactName }}{{ "  男"}} {{ item.contactTel }}
                    </h3>
                    <h3 v-if="item.contactSex===2">{{ item.contactName }}{{ "  女" }} {{ item.contactTel }}
                    </h3>
                    <p>{{ item.address }}</p>
                </div>
                <div class="addresslist-right">
                    <i class="fa fa-edit"  @click="handleClick(10)"></i>
                    <i class="fa fa-remove" @click="Remove(item.daId)" ></i>
                </div>
            </li>
        </ul>
        <!-- 新增地址部分 -->
        <div class="addbtn" >
            <i class="fa fa-plus-circle"></i>
            <p @click="handleClick(11)">新增收货地址</p>
        </div>
        <!-- 底部菜单部分 -->
        <div class="footer">
            <div @click="handleClick(1)"><i class="fa fa-home"></i>
                <p>首页</p></div>
            <div><i class="fa fa-compass"></i>
                <p>发现</p></div>
            <div @click="handleClick(2)"><i class="fa fa-file-text"></i>
                <p>订单</p></div>
            <div @click="handleClick(3)"><i class="fa fa-user-o"></i>
                <p>我的</p></div>
        </div>
    </div>
</template>
<script setup>
import {inject, onMounted, ref} from "vue";
import router from "../router/index.js";

const $http = inject("$axios");
const $queryStr = inject("$qs")
const orderTypeId = ref("");
const userId = ref("12345672222");
const userPwd = ref("");
const userNewPwd = ref("");
const resInf = ref("");
const businessId = ref()
const Businesses = ref([])
const Businesses2 = ref([])
const deliveryAddressArr = ref([])
const daId=ref("")
onMounted(
    () => {
        $http.post('/api/elm_api/DeliveryAddressController/listAllDeliveryAddressByUserId',
            $queryStr.stringify({
                userId: userId.value
            }))
            .then(response => {
                deliveryAddressArr.value = response.data;
            })
    }
)
function Remove(Da){
    if(!confirm("确认要删除该地址吗"))
        return;
    $http.post('/api/elm_api/DeliveryAddressController/removeDeliveryAddress',
        $queryStr.stringify({
            daId:Da
        }))
        .then(response=>{
            if(response.data>0){
                /*let deliveryAddress = this.$getLocalStorage(this.user.userId);
                if(deliveryAddress!=null&&deliveryAddress.daId==daId){
                    this.$removeLocalStorage(this.user.userId);
                }
                this.listDeliveryAddressByUserId();*/
                alert('删除地址成功！');
            }else{
                alert('删除地址失败！');
            }
        })
    $http.post('/api/elm_api/DeliveryAddressController/listAllDeliveryAddressByUserId',
        $queryStr.stringify({
            userId: userId.value
        }))
        .then(response => {
            deliveryAddressArr.value = response.data;
        })
    handleClick(9)
}

function handleClick(Num){
    //路由负责跳转
    if (Num===1)router.push('/Index')
    if(Num===2)router.push('/OrderList')
    if(Num===3)router.push('/Login')
    if(Num===4)router.push('/BusinessList')
    if(Num===4)router.push('/BusinessNew')
    if(Num===9)router.push('/Address')
    if(Num===10)router.push('/ChangeAddress')
    if(Num===11)router.push('/NewAddress')
}

/*export default{
    name:'UserAddress',
    data(){
        return {
            businessId:this.$route.query.businessId,
            user:{},
            deliveryAddressArr:[]
        }

    },
    created() {
/!*        this.user = this.$getSessionStorage('user');*!/

        this.listDeliveryAddressByUserId();
    },
    components:{
    },
    filters:{
        sexFilter(value){
            return value===1?'先生':'女士';
        }
    },
    methods:{
        listDeliveryAddressByUserId(){
            //查询送货地址

            $http.post('/api/elm_api/DeliveryAddressController/listDeliveryAddressByUserId',$qs.stringify({
                userId:this.user.userId
            })).then(response=>{
                this.deliveryAddressArr = response.data;
            }).catch(error=>{
                console.error(error);
            });
        },
        setDeliveryAddress(deliveryAddress){
            //把用户选择的默认送货地址存储到localStorage中
            this.$setLocalStorage(this.user.userId,deliveryAddress);
            this.$router.push({path:'/orders',query:{businessId:this.businessId}});
        },
        toAddUserAddress(){
            this.$router.push({path:'/addUserAddress',query:{businessId:this.businessId}});
        },
        editUserAddress(daId){
            this.$router.push({path:'/editUserAddress',query:
                    {businessId:this.businessId,daId:daId}});
        },
        removeUserAddress(daId){
            if(!confirm('确认要删除此送货地址吗？')){
                return;
            }
            $http.post('/api/elm_api/DeliveryAddressController/removeDeliveryAddress',$queryStr.stringify({
                orderTypeId:orderTypeId.value
            }))
                .then(response=>{
                if(response.data>0){
                    let deliveryAddress = this.$getLocalStorage(this.user.userId);
                    if(deliveryAddress!=null&&deliveryAddress.daId==daId){
                        this.$removeLocalStorage(this.user.userId);
                    }
                    this.listDeliveryAddressByUserId();
                }else{
                    alert('删除地址失败！');
                }
            })
        }
    }
}*/
</script>
<style scoped lang="css">
@import "../../src/css/global.css";
@import "../../src/css/font-awesome/css/font-awesome.min.css";
@import "../../src/css/Address.css";
@import "../../src/css/normalize.css";
@import "../../src/css/businessList.css";
@import "../../src/css/Footer.css";


</style>